<template>
  <el-card class="box-card" >
    <el-row>
      <el-col :span="6">
        订单编号：
        <el-input style="width: 150px"
                  placeholder="请输入内容"
                  prefix-icon="el-icon-search"
                  v-model="input">
        </el-input>
      </el-col>
      <el-col :span="6">
        地区：
        <el-input style="width: 150px"
                  placeholder="请输入内容"
                  prefix-icon="el-icon-search"
                  v-model="input">
        </el-input>
      </el-col>
      <el-col :span="6">
        车库名：
        <el-input style="width: 150px"
                  placeholder="请输入内容"
                  prefix-icon="el-icon-search"
                  v-model="input">
        </el-input>
      </el-col>
      <el-col :span="6">
        用户名：
        <el-input style="width: 150px"
                  placeholder="请输入内容"
                  prefix-icon="el-icon-search"
                  v-model="input">
        </el-input>
      </el-col>
      <el-col :span="14">
        <div class="block">
          <span class="demonstration">出租时间段：</span>
          <el-date-picker
              v-model="value2"
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right">
          </el-date-picker>
        </div>
      </el-col>
      <el-col :span="6">
        <el-button>查询</el-button>
      </el-col>
    </el-row>

    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          fixed
          prop="date"
          label="序号"
          width="150">
      </el-table-column>
      <el-table-column
          prop="name"
          label="出租者名"
          width="120">
      </el-table-column>
      <el-table-column
          prop="province"
          label="抢租名"
          width="120">
      </el-table-column>
      <el-table-column
          prop="city"
          label="车位ID"
          width="120">
      </el-table-column>
      <el-table-column
          prop="address"
          label="出租开始时间"
          width="100">
      </el-table-column>
      <el-table-column
          prop="address"
          label="出租结束时间"
          width="100">
      </el-table-column>
      <el-table-column
          prop="zip"
          label=""
          width="120">
      </el-table-column>
      <el-table-column
          prop="zip"
          label="金额"
          width="120">
      </el-table-column>
      <el-table-column
          prop="zip"
          label="支付渠道"
          width="120">
      </el-table-column>
      <el-table-column
          prop="zip"
          label="支付状态"
          width="60">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
      >
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
          layout="prev, pager, next"
          :total="1000">
      </el-pagination>
    </div>
  </el-card>

</template>

<script>
export default {
  name: "OrderInfo",
  data() {
    return {
      input: '',
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1517 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1519 弄',
        zip: 200333
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333
      }],pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      value2: ''
    }
  },
  methods: {
    handleClick(){
      this.$router.push({name:"UpdUser"})
    }
  }
}
</script>

<style>
.el-row {
  margin-bottom: 20px
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>